De antwoorden op deze vraag zijn een inspanning van de gemeenschap. Bewerk bestaande antwoorden om dit bericht te verbeteren. Het accepteert momenteel geen nieuwe antwoorden of interacties. Hoe kan ik de gebruiker van de ene pagina naar de andere omleiden met jQuery of puur JavaScript?
2020-12-07 21:59:16
1
2
De volgende
Men leidt niet simpelweg om met jQuery
jQuery is niet nodig en window.location.replace (...) simuleert het best een HTTP-omleiding.
window.location.replace (...) is beter dan window.location.href, omdat replace () de oorspronkelijke pagina niet in de sessiegeschiedenis bewaart, wat betekent dat de gebruiker niet vast komt te zitten in een nooit eindigende knop fiasco.
Als u wilt simuleren dat iemand op een link klikt, gebruikt u
location.href
Als u een HTTP-omleiding wilt simuleren, gebruikt u location.replace
Bijvoorbeeld:
// vergelijkbaar gedrag als een HTTP-omleiding
window.location.replace ("http://stackoverflow.com");
// vergelijkbaar gedrag als klikken op een link
window.location.href = "http://stackoverflow.com";
|
WAARSCHUWING: Dit antwoord is slechts gegeven als mogelijke oplossing; het is duidelijk niet de beste oplossing, aangezien het jQuery vereist. Geef in plaats daarvan de voorkeur aan de pure JavaScript-oplossing.
$ (locatie) .attr ('href', 'http://stackoverflow.com')
|
Standaard "vanille" JavaScript-manier om een pagina om te leiden
window.location.href = 'newPage.html';
Of eenvoudiger: (aangezien venster Globaal is)
location.href = 'newPage.html';
Als je hier bent omdat je HTTP_REFERER verliest tijdens het omleiden, blijf dan lezen:
(Negeer anders dit laatste deel)
Het volgende gedeelte is bedoeld voor degenen die HTTP_REFERER gebruiken als een van de vele beveiligingsmaatregelen (hoewel het geen goede beveiligingsmaatregel is). Als u Internet Explorer 8 of lager gebruikt, gaan deze variabelen verloren bij gebruik van enige vorm van JavaScript-paginaomleiding (location.href, etc.).
Hieronder gaan we een alternatief voor IE8 en lager implementeren, zodat we HTTP_REFERER niet verliezen. Anders kunt u bijna altijd gewoon window.location.href gebruiken.
Testen op HTTP_REFERER (URL-plakken, sessie, enz.) Kan helpen bepalen of een verzoek legitiem is.
(Opmerking: er zijn ook manieren om deze verwijzingen te omzeilen / vervalsen, zoals aangegeven door de link van de droop in de opmerkingen)
Eenvoudige cross-browser testoplossing (terugval naar window.location.href voor Internet Explorer 9+ en alle andere browsers)
Gebruik: redirect ('anotherpage.aspx');
functie omleiding (url) {
var ua = navigator.userAgent.toLowerCase (),
isIE = ua.indexOf ('msie')! == -1,
version = parseInt (ua.substr (4, 2), 10);
// Internet Explorer 8 en lager
if (isIE && versie <9) {
var link = document.createElement ('a');
link.href = url;
document.body.appendChild (link);
link.click ();
}
// Alle andere browsers kunnen de standaard window.location.href gebruiken (ze verliezen geen HTTP_REFERER zoals Internet Explorer 8 en lager)
anders {
window.location.href = url;
}
}
|
Er zijn veel manieren om dit te doen.
// window.location
window.location.replace ('http://www.example.com')
window.location.assign ('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/ pad'
// window.history
window.history.back ()
window.history.go (-1)
// window.navigate; ALLEEN voor oude versies van Internet Explorer
window.navigate ('top.jsp')
// Waarschijnlijk geen bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';
// jQuery
$ (locatie) .attr ('href', 'http: //www.example.com')
$ (window) .attr ('locatie', 'http: //www.example.com')
$ (locatie) .prop ('href', 'http://www.example.com')
|
Dit werkt voor elke browser:
window.location.href = 'jouw_url';
|
Het zou helpen als u wat meer beschrijvend zou zijn in wat u probeert te doen. Als u wisselende gegevens probeert te genereren, zijn er enkele opties om dit te doen. U kunt afzonderlijke links genereren voor elke pagina die u rechtstreeks wilt bezoeken.
1
2
3
...
Merk op dat de huidige pagina in het voorbeeld anders wordt behandeld in de code en met CSS.
Als u wilt dat de gepagineerde gegevens worden gewijzigd via AJAX, is dit waar jQuery binnenkomt. Wat u zou doen, is een klik-handler toevoegen aan elk van de ankertags die overeenkomen met een andere pagina. Deze klik-handler zou een jQuery-code aanroepen die de volgende pagina ophaalt via AJAX en de tabel bijwerkt met de nieuwe gegevens. In het onderstaande voorbeeld wordt ervan uitgegaan dat u een webservice heeft die de nieuwe paginagegevens retourneert.
$ (document) .ready (functie () {
$ ('a.pager-link'). click (function () {
var page = $ (this) .attr ('href'). split (/ \? /) [1];
$ .ajax ({
type: 'POST',
url: '/ pad-naar-service',
data: pagina,
succes: functie (inhoud) {
$ ('# myTable'). html (inhoud); // vervangen
}
});
teruggeven false; // om de link te stoppen
});
});
|
Ik denk ook dat location.replace (URL) de beste manier is, maar als je de zoekmachines op de hoogte wilt stellen van je omleiding (ze analyseren geen JavaScript-code om de omleiding te zien), moet je de rel = "canonical" meta toevoegen tag op uw website.
Het toevoegen van een noscript-sectie met daarin een HTML-metatag vernieuwen, is ook een goede oplossing. Ik raad u aan om deze JavaScript-omleidingstool te gebruiken vooromleidingen maken. Het heeft ook ondersteuning voor Internet Explorer om de HTTP-verwijzer door te geven.
Voorbeeldcode zonder vertraging ziet er als volgt uit:
|
Maar als iemand terug wil verwijzen naar de startpagina, kan hij het volgende fragment gebruiken.
window.location = window.location.host
Het zou handig zijn als u drie verschillende omgevingen heeft: ontwikkeling, enscenering en productie.
U kunt dit window of window.location-object verkennen door deze woorden in de Chrome Console of Firebug's Console te plaatsen.
|
JavaScript biedt u vele methoden om de huidige URL op te halen en te wijzigen die wordt weergegeven in de adresbalk van de browser. Al deze methoden gebruiken het Location-object, dat een eigenschap is van het Window-object. U kunt als volgt een nieuw Location-object maken met de huidige URL.
var currentLocation = window.location;
Basisstructuur van een URL
//:/
Protocol - Specificeert de protocolnaam die wordt gebruikt om toegang te krijgen tot de bron op internet. (HTTP (zonder SSL) of HTTPS (met SSL))
hostnaam - Hostnaam geeft de host aan die eigenaar is van de bron. Bijvoorbeeld www.stackoverflow.com. Een server levert services met de naam van de host.
poort - Een poortnummer dat wordt gebruikt om een specifiek proces te herkennen waarnaar een internet- of ander netwerkbericht moet worden doorgestuurd wanneer het bij een server aankomt.
padnaam - Het pad geeft informatie over de specifieke bron binnen de host waartoe de webclient toegang wil hebben. Bijvoorbeeld stackoverflow.com/index.html.
query - Een queryreeks volgt de padcomponent en biedt een reeks informatie die de bron voor een bepaald doel kan gebruiken (bijvoorbeeld als parameters voor een zoekopdracht of als te verwerken gegevens).
hash - Het ankergedeelte van een URL, inclusief het hekje (#).
Met deze Location-objecteigenschappen hebt u toegang tot al deze URL-componenten
hash -Sets of retourneert het ankergedeelte van een URL.
host -Sets
of retourneert de hostnaam en poort van een URL.
hostnaam -Sets of
geeft de hostnaam van een URL terug.
href -Sets of retourneert het volledige
URL.
padnaam -Set of retourneert de padnaam van een URL.
port -Set of retourneert het poortnummer dat de server gebruikt voor een URL.
protocol -Set of retourneert het protocol van een URL.
zoeken -Sets
of retourneert het zoekgedeelte van een URL
Als u nu een pagina wilt wijzigen of de gebruiker naar een andere pagina wilt omleiden, kunt u de href-eigenschap van het Location-object op deze manier gebruiken
U kunt de eigenschap href van het Location-object gebruiken.
window.location.href = "http://www.stackoverflow.com";
Location Object heeft ook deze drie methoden
toewijzen () - Laadt een nieuw document.
reload () - Laadt het huidige document opnieuw.
replace () - Vervangt het huidige document door een nieuw document
U kunt de methoden assign () en vervangen ook gebruiken om door te verwijzen naar andere pagina's zoals deze
location.assign ("http://www.stackoverflow.com");
location.replace ("http://www.stackoverflow.com");
Hoe assign () en replace () verschillen - Het verschil tussen de methode replace () en de methode assign () () is dat replace () de URL van het huidige document uit de documentgeschiedenis verwijdert, wat betekent dat het niet mogelijk is om te gebruiken de "terug" knop om terug te navigeren naar het originele document. Gebruik dus de methode assign () als u een nieuw document wilt laden en de optie wilt geven om terug te navigeren naar het originele document.
U kunt de href-eigenschap van het locatieobject ook op deze manier wijzigen met jQuery
$ (locatie) .attr ('href', url);
En daarom kunt u de gebruiker omleiden naar een andere url.
|
In feite is jQuery slechts een JavaScript-framework en voor sommige dingen, zoals omleiding in dit geval, kunt u gewoon puur JavaScript gebruiken, dus in dat geval heeft u 3 opties met vanilleJavaScript:
1) Het gebruik van locatie vervangen vervangt de huidige geschiedenis van de pagina, wat betekent dat het niet mogelijk is om de terugknop te gebruiken om terug te gaan naar de originele pagina.
window.location.replace ("http://stackoverflow.com");
2) Met behulp van locatie toewijzen, houdt dit de geschiedenis voor u bij en met de terugknop kunt u teruggaan naar de originele pagina:
window.location.assign ("http://stackoverflow.com");
3) Ik raad aan om een van die eerdere manieren te gebruiken, maar dit zou de derde optie kunnen zijn met puur JavaScript:
window.location.href = "http://stackoverflow.com";
U kunt ook een functie in jQuery schrijven om het af te handelen, maar dit wordt niet aanbevolen omdat het slechts één regel pure JavaScript-functie is, u kunt ook alle bovenstaande functies zonder venster gebruiken als u zich al in het vensterbereik bevindt, bijvoorbeeld window.location.replace ("http://stackoverflow.com"); kan location.replace ("http://stackoverflow.com") zijn;
Ook laat ik ze allemaal zien op de onderstaande afbeelding:
|
Zou gewoon moeten kunnen instellen met window.location.
Voorbeeld:
window.location = "https://stackoverflow.com/";
Hier is een eerdere post over het onderwerp: Hoe stuur ik door naar een andere webpagina?
|
Voordat ik begin, is jQuery een JavaScript-bibliotheek die wordt gebruikt voor DOM-manipulatie. Dus je zou jQuery niet moeten gebruiken voor een paginaomleiding.
Een citaat van Jquery.com:
Hoewel jQuery in oudere browserversies zonder grote problemen kan werken,
we testen jQuery er niet actief in en lossen bugs over het algemeen niet op
die in hen kunnen voorkomen.
Het werd hier gevonden:
https://jquery.com/browser-support/
Dus jQuery is geen eindoplossing voor achterwaartse compatibiliteit.
De volgende oplossing met onbewerkte JavaScript werkt in alle browsers en is al lange tijd standaard, dus u hebt geen bibliotheken nodig voor ondersteuning tussen browsers.
Deze pagina wordt na 3000 milliseconden doorverwezen naar Google
voorbeeld
U wordt binnenkort doorgestuurd naar Google.